<template>
  <div class="boxs">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="故障名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button><el-button
          icon="el-icon-plus" type="primary" plain size="small" @click="openDialog">添加故障信息</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="userArr" style="width: 100%" v-loading="loading">
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="故障名称" align="center" prop="name" />
      <el-table-column label="故障原因" align="center" prop="cause" />
      <el-table-column label="位置" align="center" prop="position" />
      <el-table-column label="故障级别" align="center" prop="grade" />
      <el-table-column label="详细信息" align="center" prop="info" />
      <el-table-column label="创建时间" align="center" prop="create_time" />

      <el-table-column label="操作" align="center" width="350">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.admin !== 1" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" v-if="scope.row.admin !== 1" type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
      @pagination="getFaultList" />

    <el-dialog title="操作框" :visible.sync="dialogVisible" width="40%">
      <el-form class="demo-form-inline" label-width="80px" :model="form"  ref="ruleForm">
        <el-form-item label="故障名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入故障名称" />
        </el-form-item>

        <el-form-item label="故障原因" prop="cause">
          <el-input v-model="form.cause" placeholder="请输入故障原因">
          </el-input>
        </el-form-item>
        <el-form-item label="故障位置" prop="position">
          <el-input v-model="form.position" placeholder="请输入故障位置">
          </el-input>
        </el-form-item>
        <el-form-item label="故障级别" prop="grade">
          <el-input v-model="form.grade" placeholder="请输入故障级别">
          </el-input>
        </el-form-item>
        <el-form-item label="详细信息" prop="info">
          <el-input v-model="form.info" placeholder="请输入详细信息">
          </el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer" v-loading="addLoading">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :type="form.id ? 'warning' : 'primary'" @click="affirm">{{
          form.id ? "确认修改" : "确认添加"
        }}</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import { getFaultList, addFault, upFault, delFault, getMoreAll, getRolesAll } from '@/api/admin';
import { formatDate } from "@/utils";
import md5 from 'js-md5';
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "User",
  data() {
    return {
      // editorContent: '', // 富文本内容绑定的数据
      queryParams: {
        page: 1,
        size: 10
      },
      total: 0,
      loading: false,
      addLoading: false,
      userArr: [],
      dialogVisible: false,
      themeOpen: false,
      rolesArr: [],
      moreArr: [],
      fqArr: [],
      search: '',
      form: {
        rxbz: '',
      },
    }
  },
  components: {
    quillEditor,
  },
  async created() {
    this.getFaultList()
  },
  methods: {
    formatterCreateTime(row) {
      return formatDate(row.createTime);
    },
    formatMore(row) {
      if (row.admin === 1) return "总管理";
      let res = this.moreArr.filter(t => t.id == row.moreId);
      if (res.length == 0) return "“账号不存在”"
      return res[0].name
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        await delFault({ id: row.id });
        this.getFaultList();
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
      })
    },
    resetForm() {
      this.form = {};
    },
    handleEdit(index, row) {
      this.resetForm();
      this.form = { ...row };
      // this.$set(this.form, "rolesId", row.rolesId.split(","));
      this.dialogVisible = true;
    },
    async affirm() {
      try {

        this.addLoading = true;
        !this.form.id && await addFault({ ...this.form });
        this.form.id && await upFault({ ...this.form });
        this.addLoading = false;
        this.$message.success(this.form.id ? '修改成功！' : '添加成功！');
        this.getFaultList();
        this.dialogVisible = false;
      } catch (e) {
        this.addLoading = false;
      }

    },

    openDialog() {
      this.resetForm();
      this.dialogVisible = true
    },
    async getRoles() {
      const { data } = await getRolesAll();
      this.rolesArr = data.map(t => { t.id = t.id.toString(); return t });
    },
    async getMoreAll() {
      const { data } = await getMoreAll();
      this.moreArr = data;
    },
    async getFaultList() {
      this.loading = true;
      const { data, total } = await getFaultList(this.queryParams);
      this.loading = false;
      this.userArr = data; this.total = total;
    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getFaultList();
    }
  }
}
</script>
<style scoped lang="scss">
.boxs {
  padding: 20px;
}

.color-title {
  margin-bottom: 10px;
  color: #000;
}
</style>
